<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./lib/vue-2.4.0.js"></script>
</head>

<body>
    <div id="app">
        <td>{{item.ctime | dataFormat('yyyy-mm-dd')}}</td><br>

        <td>{{item.ctime}}</td>
    </div>
    <td>{{item.ctime}}</td>
</body>

<script>
    var vm = new Vue({
        el: '#app',
        data: {
            item: {
                ctime: new Date()
            }
        },
        methods: {},
        filters: { // 私有局部过滤器，只能在 当前 VM 对象所控制的 View 区域进行使用

            dataFormat(input, pattern = "") { // 在参数列表中 通过 pattern="" 来指定形参默认值，防止报错
                console.log(input + "input.....................");

                var dt = new Date(input);

                // 获取年月日

                var y = dt.getFullYear();

                var m = (dt.getMonth() + 1).toString().padStart(2, '0');

                var d = dt.getDate().toString().padStart(2, '0');



                // 如果 传递进来的字符串类型，转为小写之后，等于 yyyy-mm-dd，那么就返回 年-月-日

                // 否则，就返回  年-月-日 时：分：秒

                if (pattern.toLowerCase() === 'yyyy-mm-dd') {

                    return `${y}-${m}-${d}`;

                } else {

                    // 获取时分秒

                    var hh = dt.getHours().toString().padStart(2, '0');

                    var mm = dt.getMinutes().toString().padStart(2, '0');

                    var ss = dt.getSeconds().toString().padStart(2, '0');



                    return `${y}-${m}-${d} ${hh}:${mm}:${ss}`;

                }

            }

        }
    });

    // 定义一个全局过滤器

    Vue.filter('dataFormat', function (input, pattern = '') {

        var dt = new Date(input);

        // 获取年月日

        var y = dt.getFullYear();

        var m = (dt.getMonth() + 1).toString().padStart(2, '0');

        var d = dt.getDate().toString().padStart(2, '0');



        // 如果 传递进来的字符串类型，转为小写之后，等于 yyyy-mm-dd，那么就返回 年-月-日

        // 否则，就返回  年-月-日 时：分：秒

        if (pattern.toLowerCase() === 'yyyy-mm-dd') {

            return `${y}-${m}-${d}`;

        } else {

            // 获取时分秒

            var hh = dt.getHours().toString().padStart(2, '0');

            var mm = dt.getMinutes().toString().padStart(2, '0');

            var ss = dt.getSeconds().toString().padStart(2, '0');



            return `${y}-${m}-${d} ${hh}:${mm}:${ss}`;

        }

    });
</script>

</html>